<script setup>
import { ElMessage } from "element-plus";
const router = useRouter();
const aCity = {
  11: "北京",
  12: "天津",
  13: "河北",
  14: "山西",
  15: "内蒙古",
  21: "辽宁",
  22: "吉林",
  23: "黑龙江",
  31: "上海",
  32: "江苏",
  33: "浙江",
  34: "安徽",
  35: "福建",
  36: "江西",
  37: "山东",
  41: "河南",
  42: "湖北",
  43: "湖南",
  44: "广东",
  45: "广西",
  46: "海南",
  50: "重庆",
  51: "四川",
  52: "贵州",
  53: "云南",
  54: "西藏",
  61: "陕西",
  62: "甘肃",
  63: "青海",
  64: "宁夏",
  65: "新疆",
  71: "台湾",
  81: "香港",
  82: "澳门",
  91: "国外",
};
function cidInfo(sId) {
  var iSum = 0;
  var info = "";
  if (!/^\d{17}(\d|x)$/i.test(sId)) {
    return false;
  }
  sId = sId.replace(/x$/i, "a");

  if (aCity[parseInt(sId.substr(0, 2))] == null) {
    // return "Error:非法地区"
    return false;
  }
  var sBirthday =
    sId.substr(6, 4) +
    "-" +
    Number(sId.substr(10, 2)) +
    "-" +
    Number(sId.substr(12, 2));

  var d = new Date(sBirthday.replace(/-/g, "/"));

  if (
    sBirthday !=
    d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
  ) {
    // return "Error:非法生日"
    return false;
  }

  for (var i = 17; i >= 0; i--) {
    iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
  }
  if (iSum % 11 != 1) {
    // return "Error:非法证号"
    return false;
  }
  // return aCity[parseInt(sId.substr(0, 2))] + "," + sBirthday + "," + (sId.substr(16, 1) % 2 ? "男" : "女")
  return true;
}
var checkCard = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("证件号码不能为空"));
  }
  if (form.value.cardTypeText == "1") {
    if (!cidInfo(value)) {
      callback(new Error("请输入正确证件号码"));
    } else {
      callback();
    }
  } else {
    callback();
  }
};
// 后台返回查询结果
const response = ref({
  uname: "",
  ucompany: "",
  id: "",
  uexpoId: "",
});
const dialogVisible = ref(false);
const isLoading = ref(false);
const refForm = ref();
const cardType = ref();
const form = ref({
  name: undefined,
  company: undefined,
  companyTitle: undefined,
  email: undefined,
  cardTypeText: "",
  phone: "",
  cardId: undefined,
  euDefine: "官网",
  defineName: "官网",
  urlsId: 7995,
  loginId: 6233,
  expoId: 1074,
});
const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "change" }],
  company: [
    {
      required: true,
      message: "请输入公司（单位）名称",
      trigger: "change",
    },
  ],
  companyTitle: [{ required: true, message: "请输入职位", trigger: "change" }],

  cardTypeText: [
    { required: true, message: "请输入证件类型", trigger: "change" },
  ],
  email: [{ required: true, message: "请输入邮箱", trigger: "change" }],
  cardId: [{ required: true, trigger: "change", validator: checkCard }],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号",
      trigger: "change",
    },
  ],
});
function fliterData() {
  switch (form.value.cardTypeText) {
    case "1":
      form.value.cardTypeText = "身份证";
      cardType.value = 1;
      break;
    case "2":
      form.value.cardTypeText = "护照";
      cardType.value = 2;
      break;
    case "3":
      form.value.cardTypeText = "军官证";
      cardType.value = 3;
      break;
    case "4":
      form.value.cardTypeText = "台胞证";
      cardType.value = 4;
      break;
    case "5":
      form.value.cardTypeText = "回乡证(港澳居民来往内地通行证)";
      cardType.value = 5;
      break;
    case "6":
      form.value.cardTypeText = "其他";
      cardType.value = 6;
      break;

    default:
      break;
  }
}
async function confirmForm() {
  fliterData();
  try {
    await refForm.value.validate();
  } catch (error) {
    ElMessage.error("请按规定填写信息");
    return;
  }
  isLoading.value = true;
  let data = form.value;
  const res = await getFetchData({
    url: "https://reg.dataexpo.com.cn/custom/CustomerUserInfo/addUserInfo",
    opts: {
      ...data,
    },
    method: "post",
  });
  if (res.code == 200) {
    if (res.msg == "你的手机号码已有关联数据") {
      response.value = res.data;
      dialogVisible.value = true;
      isLoading.value = false;
    } else {
      ElMessage.success(res.msg);
      refForm.value.resetFields();
      router.push("/apply/success");
    }
  } else {
    isLoading.value = false;
    ElMessage.error(res.msg);
  }
}
async function confirmSubmit() {
  isLoading.value = true;
  fliterData();
  let data = {
    euUserId: response.value.id,
    euExpoId: response.value.uexpoId,
    isUserClass: 1,
    userMap: {
      isUserClass: 1,
      cardType: cardType.value,
      ...form.value,
    },
  };
  const res = await getFetchData({
    url: "https://reg.dataexpo.com.cn/custom/CustomerUserInfo/addExpoUser",
    opts: {
      ...data,
    },
    method: "post",
  });
  if (res.code == 200) {
    ElMessage.success(res.msg);
    cancel();
    router.push("/apply/success");
  } else {
    isLoading.value = false;
    ElMessage.error(res.msg);
    dialogVisible.value = false;
  }
}
function cancel() {
  refForm.value.resetFields();
  dialogVisible.value = false;
}
function goBack() {
  window.history.back();
}
</script>

<template>
  <div class="upback-img">
    <div class="top-img">
      <img src="@/assets/images/up1.png" alt="" />
    </div>
    <div class="form-box">
      <el-form
        label-position="top"
        :rules="rules"
        ref="refForm"
        label-width="80px"
        :model="form"
      >
        <el-form-item prop="name" label="姓名">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="companyTitle" label="职位">
          <el-input
            v-model="form.companyTitle"
            clearable
            placeholder="请输入职位"
          ></el-input>
        </el-form-item>
        <el-form-item prop="company" label="公司（单位）名称">
          <el-input
            v-model="form.company"
            clearable
            placeholder="请输入公司(单位)名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码">
          <el-input
            v-model="form.phone"
            clearable
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input
            v-model="form.email"
            clearable
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cardTypeText" label="证件类型">
          <client-only>
            <el-select
              style="width: 100%"
              v-model="form.cardTypeText"
              placeholder="请选择证件类型"
            >
              <el-option label="身份证" value="1"></el-option>
              <el-option label="护照" value="2"></el-option>
              <el-option label="军官证" value="3"></el-option>
              <el-option label="台胞证" value="4"></el-option>
              <el-option
                label="回乡证(港澳居民来往内地通行证)"
                value="5"
              ></el-option>
              <el-option label="其他" value="6"></el-option>
            </el-select>
          </client-only>
        </el-form-item>
        <el-form-item prop="cardId" label="证件号码">
          <el-input
            v-model="form.cardId"
            clearable
            placeholder="请输入证件号码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box pd-b-108">
        <el-button @click="goBack" type="warning"> 返回</el-button>
        <el-button type="warning" :loading="isLoading" @click="confirmForm"
          >下一步</el-button
        >
      </div>
      <el-dialog
        title="提示"
        v-model="dialogVisible"
        @close="cancel"
        width="400px"
      >
        <div class="dia-tt">您的手机号码已有关联数据</div>
        <div class="dia-tt">请问是否更新关联数据?</div>
        <div>姓名：{{ response.uname }}</div>
        <div>公司：{{ response.ucompany }}</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" size="mini">不更新</el-button>
            <el-button
              type="primary"
              size="mini"
              :loading="isLoading"
              @click="confirmSubmit"
              >更新</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped>
body {
  background-color: #fff;
}
.upback-img {
  background-image: url("../../assets/images/up3.png");
  background-size: 100% 100%;
  padding-top: 7.2vw;
}
.top-img,
.form-box {
  padding-left: 30.521vw;
}
.top-img {
  width: 19vw;
}
.top-img img {
  width: 100%;
}
.form-box {
  width: 36.979vw;
  margin-top: 2.604vw;
}
.el-input__inner:hover {
  border-color: #a4a4a4;
}
.el-input__inner {
  background-color: transparent;
  border: 0.052vw solid #a4a4a4;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
.el-form-item__label {
  line-height: 1;
}
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-top: 4.167vw;
}
.btn-box .el-button {
  width: 48%;
  border-radius: 0;
  color: #fff;
  font-size: 20px;
}
.pd-b-108 {
  padding-bottom: 5.625vw;
}
:deep(.el-dialog) {
  border-radius: 16px;
}
.dia-tt {
  text-align: center;
  margin-bottom: 10px;
}
:deep(.el-dialog__body) {
  font-size: 18px;
  color: #000;
}
@media (max-width: 768px) {
  .upback-img {
    padding-top: 13.167vw;
    height: auto;
  }
  .form-box {
    width: 90%;
    margin: 0 5%;
    margin-top: 6.667vw;
  }
  .top-img,
  .form-box {
    padding-left: 0;
  }
  .top-img {
    width: 70vw;
    padding-left: 5%;
  }
  :deep(.el-dialog) {
    width: 90% !important;
  }
  .btn-box .el-button {
    font-size: 16px;
  }
}
</style>
